<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form layout="vertical" @finish="submit" :rules="formRules" :model="form" ref="formRef">
        <a-card :bordered="false" :body-style="{ paddingTop: '0' }">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item name="roleName" :label="t('角色名称')">
                <a-input v-model:value="form.roleName"></a-input>
              </a-form-item>
              <a-form-item name="roleSort" :label="t('排序')">
                <a-input-number class="w-[100%]" v-model:value="form.roleSort"></a-input-number>
              </a-form-item>
              <div v-admin>
                <a-form-item name="roleKey" :label="t('标志')">
                  <a-input-number class="w-[100%]" v-model:value="form.roleKey"></a-input-number>
                </a-form-item>
              </div>
              <a-form-item name="remark" :label="t('备注')">
                <a-textarea v-model:value="form.remark"></a-textarea>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="菜单分配">
                <a-checkbox v-model:checked="form.menuCheckStrictly" class="mb-4">
                  父子联动
                </a-checkbox>
                <a-card>
                  <a-tree
                    checkable
                    block-node
                    :selectable="false"
                    :field-names="{ key: 'id', title: 'label' }"
                    :treeData="treeData"
                    :check-strictly="!form.menuCheckStrictly"
                    v-model:checked-keys="roleSelectedKeys"
                    ref="treeRef"
                  ></a-tree>
                </a-card>
              </a-form-item>
            </a-col>
          </a-row>

          <div class="flex gap-4">
            <a-button type="primary" htmlType="submit">{{ t('保存') }}</a-button>
            <a-button @click="reset">{{ t('重置') }}</a-button>
          </div>
        </a-card>
      </a-form>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, roleSelectedKeys, table } from '../data/data';
import { formRef, form, formRules } from '../data/form';
import { getUserProfile } from '@/api/modules/user/user';
import { addRole } from '@/api/modules/auth/roles';
import { updateRole } from '@/api/modules/auth/roles';
import { notify } from '@/utils/common/common';
import { nanoid } from 'nanoid';

const treeData = ref();
const treeRef = ref();

const { t } = useI18n();
const back = () => {
  allowEditMenu.value = false;
  reset();
};
const submit = async () => {
  if (roleSelectedKeys.value instanceof Array) {
    form.value.menuIds = roleSelectedKeys.value.concat(treeRef.value.halfCheckedKeys);
  } else {
    form.value.menuIds = roleSelectedKeys.value.checked.concat(treeRef.value.halfCheckedKeys);
  }
  if (form.value.menuCheckStrictly) {
  } else {
    form.value.menuIds = roleSelectedKeys.value;
  }

  let result: IResponse | undefined = undefined;
  if (!form.value.roleId) {
    form.value.roleKey = nanoid();

    const { data } = await addRole(form.value);
    result = data;
  } else {
    const { data } = await updateRole(form.value);
    result = data;
  }

  notify(result);
  await list();
  back();
};
const reset = () => {
  formRef.value?.resetFields();
};

onMounted(async () => {
  if (!treeData.value) {
    const { data } = await getUserProfile();
    treeData.value = data.data.menus;
  }
});
</script>

<style lang="scss" scoped></style>
